<template>
  <div class="detailBox">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <h1 class="title">用户资料</h1>
        <div class="flex flex-wrap mb-4">
            <div class="flex items-center flex-1">
                <span class="left">用户ID：</span>
                <span class="right">{{userInfo.user_data.user_code}}</span>
            </div>
            <div class="flex items-center flex-1">
                <span class="left">用户昵称：</span>
                <span class="right">{{userInfo.user_data.nickname}}</span>
            </div>
            <div class="flex items-center flex-1">
                <span class="left">注册时间：</span>
                <span class="right">{{userInfo.user.register_time}}</span>
            </div>
            <div class="flex items-center flex-1">
                <span class="left">所属公会：</span>
                <span class="right">{{userInfo.sociaty_name}}</span>
            </div>
            <div class="flex items-center flex-1">
                <span class="left">性别：</span>
                <span class="right">{{userInfo.user_data.sex === 1 ? '男' : '女'}}</span>
            </div>
            <div class="flex items-center flex-1">
                <span class="left">个性签名：</span>
                <span class="right">{{userInfo.user_data.signature}}</span>
            </div>
        </div>
        <div class="flex mb-4 items-center">
            <span class="left">语音签名：</span>
            <audio :src="userInfo.user_data.intro_voice" controls></audio>
        </div>
        <div class="flex mb-4">
            <span class="left">头像：</span>
            <el-image :src="userInfo.user_data.head_picture" fit="fill" class="avatar">
                <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                </div>
            </el-image>
        </div>
        <div class="flex mb-4">
            <span class="left">照片：</span>
            <div class="pictureBox">
                <el-image 
                    v-for="item in userInfo.user_photo"
                    :src="item.url"
                    fit="fill"
                    :key="item.id"
                    :preview-src-list="srcList"
                    class="picture"
                ></el-image>
            </div>
        </div>
    </el-card>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <h1 class="title">审核资料</h1>
        <div class="flex items-center mb-4">
            <span class="left">姓名：</span>
            <span class="right">{{userInfo.name}}</span>
        </div>
        <div class="flex items-center mb-4">
            <span class="left">电话：</span>
            <span class="right">{{userInfo.mobile}}</span>
        </div>
        <div class="flex items-center mb-4">
            <span class="left">微信：</span>
            <span class="right">{{userInfo.wechat_no}}</span>
        </div>
        <div class="flex items-center mb-4">
            <span class="left">个人特长：</span>
            <span class="right">{{userInfo.strong_point}}</span>
        </div>
        <div class="flex mb-4 items-center">
            <span class="left">音频：</span>
            <audio :src="userInfo.recording_url" controls></audio>
        </div>
    </el-card>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <h1 class="title">审核</h1>
        <el-form :model="audioForm" ref="audioForm" :rules="rules" label-width="120px" class="ml-8" :inline="false" size="normal">
            <el-form-item label="审核结果" prop="audio">
                <el-radio-group v-model="audioForm.audio" @change="handleChange">
                    <el-radio :label="1">通过</el-radio>
                    <el-radio :label="-1">拒绝</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="面试场次" prop="session" v-if="audioForm.audio === 1">
                <el-select v-model="audioForm.session" placeholder="请选择" clearable filterable>
                    <el-option v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="拒绝原因" prop="reason" v-if="audioForm.audio === -1">
                <el-input type="textarea" :rows="5" resize="none" v-model="audioForm.reason" placeholder="请输入" 
                    :show-word-limit="false" style="width: 600px;">
                </el-input>
                
            </el-form-item>
        </el-form>
        <div class="ml-44">
            <el-button>取消</el-button>
            <el-button type="primary" @click="onSubmit('audioForm')">确定</el-button>
        </div>
    </el-card>
    
  </div>
</template>

<script>
import { applyDetail, applyAudit } from '@/api/sys/anchorList'
import { InterviewList } from "@/api/anchorManagement/anchorInterviewSetting";
export default {
    name: 'detailsPage',
    data() {
        return {
            srcList: [],
            options: [],
            audioForm: {
                session: undefined,
                audio: undefined,
                reason: undefined
            },
            rules: {
                session: [{ required: true, message: '请选择面试场次', trigger: 'blur'}],
                audio: [{ required: true, message: '请选择审核结果', trigger: 'blur'}],
                reason: [{ required: true, message: '请输入拒绝原因', trigger: 'blur'}],
            },
            auditId: undefined,
            userInfo: {}
        }
    },
    created() {
        this.auditId = this.$route.query.id
        this.getTableData()
        this.getInterviewSession()
    },
    methods: {
        /**
         * getTableData
         * @desc 获取详情
         */
         async getTableData() {

            this.loading = true;
            
            const detail = await applyDetail({
                id: this.auditId
            });
            if (detail.code === 200) {
                this.userInfo = detail.data
                this.srcList = []
                this.userInfo.user_photo.map(item => {
                    this.srcList.push(item.url)
                })
                this.loading = false;
            }
        },
        onSubmit(form) {
            this.$refs[form].validate(valid => {
                if (valid) {
                    const data = {
                        id: this.userInfo.id,
                        type: this.audioForm.audio,
                        interview_room_id: this.audioForm.audio === 1 ? this.audioForm.session : undefined,
                        refuse_msg:  this.audioForm.audio === -1 ? this.audioForm.reason : undefined
                    }
                    this.ApplyAudit(data)
                }
            })
        },
        ApplyAudit(data) {
            applyAudit(data).then(res => {
                if(res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '操作成功'
                    })
                    this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
                        this.$router.replace({path:"qualification"});
                    })
                }
            })
        },
        handleChange(val) {
            this.audioForm.session = undefined
            this.audioForm.reason = undefined
        },
        async getInterviewSession () {
        const detail = await InterviewList({
            perPage: 90000,
            is_now: 1
        });
        if (detail.code === 200) {
            this.options = detail.data.data;
        }
    },
    },
}
</script>

<style lang="scss" scoped>
.detailBox{
    .left{
        width: 120px;
        text-align: right;
    }
    .title{
        font-size: 28px;
        margin-bottom: 15px;
    }
    .avatar{
        width: 200px;
        height: 200px;
        overflow: hidden;
        border: 1px darkgray dashed;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        font-size: 32px;
    }
    .picture{
        width: 200px;
        height: 266px;
        overflow: hidden;
        margin-right: 15px;
        margin-bottom: 15px;
    }
}
</style>